<%@ page language="java" contentType="text/html;charset=UTF-8" %><%@ include file="../../inc/global.jsp" 
%><compress:html enabled="true" removeComments="false" compressJavaScript="true" yuiJsDisableOptimizations="true">
<!doctype html>
<html>
<head>
<title><fmt:message key="jsp.a.category.props.list"/></title>
<%@include file="../head.jsp" %>
<style type="text/css">
#properties th dd span, #properties td dd span {color:blue;font-size:12px;cursor:pointer;}
#properties em{color:333; display:block; width:50px; height:20px; background:#ddd; border:1px solid #fff; text-align:center;}
#properties input[type=text] {width:48px; height:18px; line-height:18px;}
.propsForm {margin:7px;}
.propsForm th {width:80px;}
.propsForm th, .propsForm td {height:30px;}
th input[type=text]{height:22px; line-height:22px; padding:0px 3px;}
</style>
<script type="text/javascript">
$(function() {
	$('input[name=addProperties]').poshytip({
		className: 'tip-yellow',
		showOn: 'focus',
		alignTo: 'target',
		alignX: 'center',
		alignY: 'bottom',
		offsetX: 0,
		offsetY: 5
	});
	addPros.init();
});

function addProperties() {
	var dt, bg;
	var _this = this;
	var input = $('<input type="text" name="addProperties" value="" title="新增属性，回车后自动保存！"/>');
	function hide() {
		aju.removeAll([dt,bg,$('.tip-yellow')]);
		$('#ajaxClose').remove();
	}
	function save(cid, pid) {
		bg = aju.ajaxBg(function() {
			aju.setOffsetDown(200);
			aju.setOffsetRight(10);
			var url = '/a/brand-category/props/form?cid='+cid+"&pid="+pid;
			$.get(url, function(data){
				dt = aju.ajaxData().css({'width':'600','height':'180'});
				dt.html(data);
				aju.positionCenter(dt);
				// 显示关闭按钮并绑定关闭事件
				aju.ajaxClose(dt).click(function(){
					hide();
				});
				dt.find('input[type=text]').focus();
				dt.find('#delProp').bind('click', function(event){
					var _btn = this;
					$(this).attr('disabled','true');
					var pid = $('#pid').val();
					//alert('del' + pid);
					$.post('/a/brand-category/props/del'
						, {id : pid}
						, function(data) {
							$(_btn).removeAttr('disabled');
							var json = $.parseJSON(data);
							if(json.succeed) {
								$('#sn_'+pid).parent().remove();
							} else {
								alert('系统发生意外错误，请重启系统或联系管理员！');
							}
							hide();
						});
				});
				//
				dt.find('#addProp').bind('click', function(event){
					var _btn = this;
					$(this).attr('disabled','true');
					var cid = $('#cid').val();
					var pid = $('#pid').val();
					var pname = $('#pname').val();
					var copyProp = $("#copyProp").is(':checked');
					// post begin
					$.post('/a/brand-category/props/save', 
							{categoryId : cid
							, id : pid
							, name : pname
							, copyProp : copyProp
							},
							function(data) {
								$(_btn).removeAttr('disabled');
								var json = $.parseJSON(data);
								if(json.succeed) {
									if(json.data.copyProp) {
										window.location.reload();
									}
									// 添加成功后隐藏表单，追加结果至页面
									if(!pid) {
										$('#em_'+cid).parent().before('<dd><span id="sn_'+json.data.id+'">'
												+json.data.name+'</span></dd>');
										_this.init();
									}else {
										$('#sn_'+pid).html(json.data.name);
									}
										$(_btn).poshytip({
											content: '操作成功！',
											showOn: 'none',
											timeOnScreen: '5000',
											className: 'tip-yellow',
											alignTo: 'target',
											alignX: 'center',
											alignY: 'bottom',
											offsetX: 0,
											offsetY: 5
										}).poshytip('show');
								}else{
									alert(json.msg);
								}
					}); 
					// post end
				});
			});
		});
		$('body').keydown(function(event){
			if(KEY.ESC == event.keyCode) {
				hide();
			}
		});
	}
	this.init = function() {
		$('#properties span').bind('click', function() {
			var id = $(this).attr('id');
			var pid = id.replace('sn_','');
			save(null, pid);
		});
		$('#properties em').bind('click', function() {
			var id = $(this).attr('id');
			var cid = id.replace('em_','');
			save(cid, null);
		});
	};
}
var addPros = new addProperties();
</script>
<style type="text/css">
table ul li {display:block; margin:3px 11px; float:left; cursor:pointer; color:#000099;}
dl dd em {color:blue; cursor:pointer;}
</style>
</head>
<body>
<div class="wrapper">
<%@include file="../header.jsp" %>
<div class="body">
<div class="list">
<table id="properties">
<thead>
<tr>
<th>
<fmt:message key="message.category.properties" />
</th>
<th></th>
</tr>
</thead>
<tbody>
<c:forEach var="category" items="${categoryVOList}" varStatus="s">
<c:choose>
<c:when test="${(s.index % 2) != 0}">
<tr class="trbg">
</c:when>
<c:otherwise>
<tr>
</c:otherwise>
</c:choose>
<td>
<dl>
<dt>${category.name}</dt>
<c:forEach var="prop" items="${category.props}">
<dd><span id="sn_${prop.id}">${prop.name}</span></dd>
</c:forEach>
<dd><em id="em_${category.id}">添加</em></dd>
</dl>
</td>
<td></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<div class="sidebar">
</div>
<!--  -->
</div>
</div>
</body>
</html>
</compress:html>